<template>
  <div>
    <swiper></swiper>
    <P :class="isNav ? 'citydown' : 'cityup'" @click="handleJump"
      >{{ city }}▼</P
    >
    <div id="nav" :class="isNav ? 'fixed' : ''">
      <p
        :class="isNav ? 'block' : 'none'"
        style="font-size: 0.333rem; font-weight: 600; line-height: 30px"
      >
        电影
      </p>
      <div class="title">
        <router-link to="/films/NowPlaying">正在热映</router-link>
        <router-link to="/films/comingSoon">即将上映</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import Swiper from "./components/Swiper.vue";
export default {
  data() {
    return {
      isNav: false,
    };
  },
  mounted() {
    this.$store.state.city= localStorage.getItem("city");
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      var scrollTop = window.scrollY;
      if (scrollTop >= 300) {
        this.isNav = true;
      } else {
        this.isNav = false;
      }
    },
    handleJump() {
      this.$router.push("/city");
    },
  },
  components: { Swiper },
  computed: {
    city() {
      return this.$store.state.city;
    },
  },
};
</script>

<style scoped>
.block {
  display: block;
}
.none {
  display: none;
}
.router-link-active {
  color: orange;
}
.title {
  display: flex;
  font-size: 0.333rem;
  font-weight: 400;
  line-height: 40px;
  justify-content: space-around;
}
.fixed {
  position: fixed;
  top: 0;
  width: 10rem;
  background-color: #fff;
}
.title span {
  line-height: 1rem;

  cursor: pointer;
}
.cityup {
  position: absolute;
  top: 10px;
}
.citydown {
  position: fixed;
  top: 10px;
}
.citydown,
.cityup {
  font-weight: 600;
  font-size: 26px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  padding: 3px;
  z-index: 9999;
  cursor: pointer;
}
</style>